<template>
  <div>
    <el-switch
      style="display: block;margin:20px 0;width:200px"
      v-model="showAgreement"
      @change="setStatementStatus"
      active-color="#13ce66"
      :active-value="1"
      :inactive-value="0"
      active-text="协议状态">
    </el-switch>
    <vue-ueditor-wrap v-model="detail" :config="myConfig" ></vue-ueditor-wrap>
    <div  class="add-table-wrapper">
      <el-button type="primary" @click="commit" class="add-table-wrapper-btn">发布</el-button>
    </div>
  </div>
</template>

<script>
    export default {
      name: "statement",
      data(){
        return{
          showAgreement:1,
          detail:'',
          myConfig: {
            // 编辑器不自动被内容撑高
            autoHeightEnabled: false,
            // 初始容器高度
            initialFrameHeight: 400,
            // 初始容器宽度
            initialFrameWidth: '100%',
            // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
            // serverUrl: 'http://35.201.165.105:8000/controller.php',
            serverUrl:'https://hks-sys.dindong.cn/ueditor-php/controller.php',
            // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
            //UEDITOR_HOME_URL: '/peoples_association_backstage/dist//static/UEditor/'
            toolbars: [
              [
                'undo', 'redo', '|',
                'bold', 'italic', 'underline', 'strikethrough',
                'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor',
                'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
                'simpleupload', 'insertimage', 'insertvideo', 'music',
                'horizontal', 'date', 'time',
                'inserttable'
              ]
            ]
          }
        }
      },
      methods: {
        async commit(){
          let params={
            content:this.detail
          }
          let res=await this.$api.setStatement(params);
          if(res.data.level=='success'){
            this.$message.success(res.data.message)
          }else{
            this.$message.error(res.data.message)
          }
        },
        async setStatementStatus(){
          let res=await this.$api.setStatementStatus({status:this.showAgreement})
          if(res.data.level=='success'){
            this.$message.success(res.data.message)
          }else{
            this.$message.error(res.data.message)
          }
        },
        async getStatement(){
          let res= await this.$api.getStatement();
          if(res.data.level=='success'){
            if(res.data.data){
              this.detail=res.data.data.content;
              this.showAgreement=+res.data.data.status
            }
          }
        }
      },
      mounted() {
        this.getStatement()
      },
    }
</script>

<style lang="scss" scoped>
  .add-table-wrapper{
    display: flex;
    justify-content: center;
    padding:30px 0;
  }
</style>
